<!--
 要情 呈批
 @Author: zhanbh
 @Date: 2021-04-15
-->
<template>
  <module-tabs class="yq-feedback" v-model="activeName" :tabs="tabs" is-flex-box>
    <template #first>
      <module-card title="指令信息" is-normal>
        <edit-form
          label-width="calc(7em + 12px)"
          :model="orderForm"
          :fields="orderFields"
          :editable="false"
          col="12"
        ></edit-form>
      </module-card>
      <leader-comment />

      <module-card title="签收信息" is-normal main-style="padding-bottom: 1rem;">
        <edit-form
          label-width="calc(5em + 12px)"
          :model="signInfo"
          :fields="signFields"
          :editable="false"
          col="5"
        ></edit-form>
      </module-card>

      <div class="yq-feedback__part">
        <div><case-list ref="case" :id="flowId" /></div>
      </div>

      <div class="yq-feedback__part">
        <collapse-card title="反馈描述">
          <edit-form
            ref="form"
            label-width="calc(3em + 52px)"
            :model="zllx == '5' ? qbFeedbackForm : feedbackForm"
            :fields="zllx == '5' ? qbFeedbackFields : feedbackFields"
            :rules="zllx == '5' ? qbFeedbackRules : feedbackRules"
            col="18"
          >
            <template #item-attachment>
              <dg-upload
                v-model="feedbackForm.fileHolderList"
                :server-url="'./'"
                size="30m"
                tip-msg="上传文件限制大小为 30M"
              >
                <el-button type="primary" plain>上传文件</el-button>
                <template slot="fileList" slot-scope="{ type, name, size }">
                  <i :class="`dg-icon-${type}`"></i>
                  {{ `${name} (${size / 1024})KB` }}
                </template>
              </dg-upload>
            </template>
            <template #item-btns>
              <dg-button size="small" type="primary" :loading="loading" @click="onSubmit">提交</dg-button>
            </template>
          </edit-form>
          <div v-if="zllx != '5'">
            <comm-table
              ref="table"
              class="table"
              :condition="condition"
              :columns="columns"
              v-if="condition"
              url="/v1/zlFk/search"
            >
              <template slot-scope="{ row }">
                <el-button type="text">指令</el-button>
              </template>
            </comm-table>
          </div>
        </collapse-card>
      </div>
    </template>
    <template #second>
      <div v-if="activeName == 'second'">
        <all-info />
      </div>
    </template>
    <template #thirds>
      <div v-if="activeName == 'thirds'">
        <work-flow />
      </div>
    </template>
  </module-tabs>
</template>

<script>
import ModuleTabs from '@/components/layout/module-tabs';
import ModuleCard from '@/components/layout/module-card';
import CollapseCard from '@/components/layout/CollapseCard';
import CaseList from '@/pages/ExterCommun/add/components/CaseList';
import EditForm from '@@/edit-form';
import AllInfo from '@/pages/ExterCommun/detail/components/AllInfo';
import WorkFlow from '@/pages/ExterCommun/detail/components/WorkFlow';
import { orderInfo, relatedFeedback, orderFeedback } from '@/api/common';
import { BM_ZLLX, BM_DEPT } from '@/common/codeDic';
import LeaderComment from '@/pages/ExterCommun/detail/components/leader-comment';

export default {
  name: 'YQFeedback',
  components: {
    ModuleTabs,
    EditForm,
    ModuleCard,
    CollapseCard,
    CaseList,
    LeaderComment,
    AllInfo,
    WorkFlow
  },
  data() {
    return {
      signInfo: {},
      condition: null,
      loading: false,
      flowId: '',
      orderId: '',
      jsId: '',
      zllx: this.$route.query.zllx, // 指令类型
      columns: [
        { label: '序号', type: 'index', width: 70 },
        { label: '反馈人', prop: 'fkrxm' },
        { label: '联系电话', prop: 'fkrdh' },
        { label: '反馈单位', prop: 'fkdwdm', code: BM_DEPT },
        { label: '反馈时间', prop: 'fksj' },
        { label: '反馈内容', prop: 'fknr' },
        { label: '附件', prop: 'fileHolderList', type: 'fileHolderList' } // TODO:附件正确循环显示
      ],
      tabs: [
        {
          label: '反馈',
          name: 'first'
        },
        {
          label: '基本信息',
          name: 'second'
        },
        {
          label: '工作流程图',
          name: 'thirds'
        }
        // {
        //   label: '流程图',
        //   name: 'fourth'
        // }
      ],
      activeName: 'first',

      // 指令信息
      orderForm: {},
      orderFields: [
        { prop: 'zllx', label: '指令类型', code: BM_ZLLX },
        { prop: 'fbdwdm', label: '发布单位', code: BM_DEPT },
        { prop: 'zwfksj', label: '最晚反馈时间' },
        { prop: 'fbrxm', label: '发布人' },
        { prop: 'nxdzl', label: '拟下达指令' },
        { prop: 'fbrdh', label: '联系电话' },
        { prop: 'zlbz', label: '备注' },
        { prop: 'fbsj', label: '发布时间' }
      ],

      // 签收模块数据
      signFields: [
        { prop: 'qsdwdm', label: '签收单位', col: 6, code: BM_DEPT },
        { prop: 'qsrxm', label: '签收人', col: 8 },
        { prop: 'qsrdh', label: '联系电话', col: 5 },
        { prop: 'qssj', label: '签收时间', col: 5 }
      ],

      // 当指令类型不为情报研判时，反馈填写项
      feedbackForm: {
        fknr: '',
        fileHolderList: []
      },
      feedbackFields: [
        {
          prop: 'fknr',
          label: '反馈',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxlength: '200',
            showWordLimit: true
          }
        },
        {
          prop: 'attachment',
          label: '附件',
          col: 12
        },
        {
          prop: 'btns',
          col: 6,
          bind: { style: 'text-align: right' }
        }
      ],
      feedbackRules: {
        fknr: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },

      // 反馈描述数据-当指令类型为情报研判时，反馈填写项
      qbFeedbackForm: {
        jqdx: '', // 近期动向
        ypyj: '', // 研判意见
        dcyj: '', // 对策意见
        fkbz: '', // 备注
        fileHolderList: [] // 附件
      },
      qbFeedbackFields: [
        {
          prop: 'jqdx',
          label: '近期动向',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxlength: '200',
            showWordLimit: true
          }
        },
        {
          prop: 'ypyj',
          label: '研判意见',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxlength: '200',
            showWordLimit: true
          }
        },
        {
          prop: 'dcyj',
          label: '对策意见',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxlength: '200',
            showWordLimit: true
          }
        },
        {
          prop: 'fkbz',
          label: '备注',
          tag: 'el-input',
          tagBind: {
            type: 'textarea',
            rows: 3,
            placeholder: '请输入内容',
            maxlength: '200',
            showWordLimit: true
          }
        },
        {
          prop: 'attachment',
          label: '附件',
          col: 12
        },
        {
          prop: 'btns',
          col: 6,
          bind: { style: 'text-align: right' }
        }
      ],
      qbFeedbackRules: {
        ypyj: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        jqdx: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    };
  },
  created() {
    // orderId 指令id
    const { id, orderId, jsId } = this.$route.params;
    this.flowId = id;
    this.orderId = orderId;
    this.jsId = jsId;
    this.condition = {
      query_fj: {
        value: true,
        op: '='
      },
      query_qx: {
        value: 'MY',
        op: '='
      },
      query_glxx: {
        value: true,
        op: '='
      },
      flowid: {
        value: this.flowId,
        op: '='
      },
      jsid: {
        value: this.jsId,
        op: '='
      }
      // id: {
      //   value: this.orderId,
      //   op: '='
      // }
    };
    this.init();
  },
  methods: {
    init() {
      orderInfo({
        sort: {},
        page: 0,
        size: 1,
        searchCondition: JSON.stringify([
          { name: 'flowid', value: this.flowId, op: '=', type: '', format: '' },
          { name: 'id', value: this.orderId, op: '=', type: '', format: '' }
        ])
      }).then(({ data }) => {
        this.orderForm = data.content[0];
      });
      relatedFeedback({
        sort: {},
        page: 0,
        size: 1,
        searchCondition: JSON.stringify([
          { name: 'query_zlxx', value: true, op: '=', type: '', format: '' },
          { name: 'zlid', value: this.orderId, op: '=', type: '', format: '' },
          { name: 'query_qx', value: 'MY', op: '=', type: '', format: '' },
          { name: 'zlly', value: '1', op: '=', type: '', format: '' }
        ])
      }).then(({ data }) => {
        this.signInfo = data.content[0];
      });
    },
    async onSubmit() {
      const caseUserInfoList = await this.$refs.case.onValidIdcard('0');
      this.$refs.form.$refs.form.validate((valid) => {
        if (valid) {
          // 获取案件人员信息
          this.loading = true;
          orderFeedback({
            flowid: this.flowId,
            zlid: this.orderId,
            jsid: this.jsId,
            fklx: 1,
            ...this.feedbackForm,
            asjryxxList: caseUserInfoList
          })
            .then(() => {
              this.$message.success('反馈信息保存成功');
              this.$router.go(-1);
              this.loading = false;
            })
            .catch(() => {
              this.$message.warning('反馈信息保存失败');
              this.loading = false;
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.yq-feedback {
  height: calc(100vh - 11rem);

  &__part {
    margin: 0 -2rem;

    &:before {
      content: '';
      display: block;
      height: 0.875rem;
      background-color: #f5f5f5;
    }
  }
}

/deep/ .module-tabs__content {
  padding: 0.5rem 2rem;
}
</style>
